iT邦幫忙

2026 iThome 鐵人賽

DAY 16
0
Vibe Coding

從零打造 AI 全端應用:Vibe Coding 結合 n8n 視覺化工作流實戰系列 第 16 篇

Day 16:喚醒大腦:在 n8n 串接 OpenAI / Gemini 雲端 AI 引擎

  • 分享至 

  • xImage
  •  

Day 16:喚醒大腦:在 n8n 串接 OpenAI / Gemini 雲端 AI 引擎

嗨,大家今天過得好嗎?歡迎來到鐵人賽 Day 16。

過去五天,我們在 n8n 的畫布上穿梭,完成了接收請求、撈取資料庫、以及串接外部匯率 API 等基礎後端建設。現在,我們手上有一包非常豐富的 JSON Payload:裡面有使用者的「預算與需求」,還有從 Postgres 撈出來的「精選硬體清單」,以及最新的「美金匯率」。

萬事俱備,只欠東風。今天,我們要把這套系統真正的「大腦」植入工作流中,讓它具備思考與推薦的能力!

告別手刻 API:n8n 的 Advanced AI 節點

如果你以前寫過串接 OpenAI 的程式碼,你一定知道那有多煩人。你要發送 HTTP Request 到 /v1/chat/completions,要在 Header 塞 Bearer Token,還要小心翼翼地把對話歷史包裝成 {"role": "user", "content": "..."} 的 JSON 陣列。萬一 AI 吐出來的格式壞掉,整個系統還會崩潰。

但在 n8n 裡面,因為它底層整合了強大的 LangChain 框架(也就是 n8n 裡的 Advanced AI 節點群),我們完全不用管那些繁瑣的 API 規格。

實作步驟一:建立 Basic LLM Chain

  1. 在昨天整理好最終資料的 Edit Fields 節點後方,點擊 + 號。
  2. 這次不要在一般搜尋框找,請點擊搜尋面板左側的 「Advanced AI」 分類。
  3. 選擇 Basic LLM Chain 節點。

這個 Basic LLM Chain 就是我們跟 AI 對話的「處理中心」。但你會發現,這個節點的下方有一個「缺口」,提示你需要接上一個 Model。

這就是 n8n AI 節點特有的 UX 設計:主處理中心與模型是分離的。 這樣設計的好處是,你可以隨時熱插拔、無縫切換不同廠商的 AI 大腦,而不用重寫前面的邏輯。

實作步驟二:插上大腦晶片 (連線 Model 子節點)

現在,我們要決定使用哪家廠商的 AI。目前主流且好用的選擇通常是 OpenAI 或是 Google Gemini。

  1. 點擊 Basic LLM Chain 節點下方 Model 旁邊的 + 號。
  2. 搜尋並選擇你要的供應商,例如 OpenAI Chat Model 或是 Google Gemini Chat Model。
  3. 這時候它會要求你輸入 Credentials (API Key)。請去 OpenAI 的 Platform 或是 Google AI Studio 申請一把 API Key 貼上來。

** 踩坑與省錢警告:慎選 Model 版本**
在設定 Model 節點時,裡面會有一個 Model 下拉選單。請絕對、務必要去確認你選的模型版本!
很多新手沒注意,預設選到了舊版且昂貴的模型(例如 gpt-4-32k 或舊版 gemini-pro),只要測個幾次 API 額度就燒光了。開發階段,強烈建議選擇 gpt-4o-mini 或是 gemini-1.5-flash,不僅速度飛快,而且便宜到幾乎像不用錢,用來做硬體菜單推薦綽綽有餘。

試運轉:大腦開機確認

晶片插好之後,我們先來簡單測試一下大腦有沒有通電。

點開 Basic LLM Chain 節點,你會看到裡面有一個 Prompt 欄位。
先不管我們前面準備的那一大包硬體資料,請在 Prompt 裡隨便打一句測試的話,例如:
「你好,請用一句話告訴我你是一台組裝電腦推薦 AI。」

按下右上角的 Execute Node。

等個兩三秒,看看右邊的 Output 視窗。如果回傳了類似:

"你好!我是您的專屬電腦組裝助手,為您量身打造最高性價比的硬體菜單!"

太感人了!我們的後端工作流正式擁有了靈魂!

小結

今天我們成功把 OpenAI / Gemini 的大腦掛載進了 n8n 的工作流裡,而且完美避開了繁瑣的 API 封裝過程。

但如果你有跟著做,一定會發現一個問題:剛剛我們在 Prompt 裡輸入的,只是寫死的純文字。那我們辛苦從前端、資料庫、外部 API 收集來的那一大包動態 JSON 資料,到底要怎麼「餵」給這顆大腦呢?

這就是全端 AI 應用中最有價值、也最考驗工程師功力的地方。明天,我們要來玩 工作流中的 Prompt Engineering(提示詞工程),教你如何用動態變數把商業邏輯完美注入 AI 的大腦!

我們 Day 17 見!


上一篇
Day 15:外部 API 大串流:不再寫煩人的 Request,用 HTTP 節點搞定一切
下一篇
Day 17:工作流中的 Prompt Engineering:讓 AI 讀懂你的商業邏輯與防幻覺心法
系列文
從零打造 AI 全端應用:Vibe Coding 結合 n8n 視覺化工作流實戰 共 17 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言